<!-- Site Setting Panel -->
<section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->

<div class="pageheader">
  <h2><i class="fa fa-user"></i> User Profile </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> User Profile </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">
  <div class="row">
    <div class="col-xs-12 col-md-3 col-lg-4 np">
      <div class="col-md-12">
        <div class="panel">
          <div class="text-center pad-15"> <img alt="" src="images/photos/user1.png" class="img-thumbnail img-responsive img-circle"/>
            <h4>Jonathan Anderson</h4>
            <div class="pad-5 text-small"><i class="fa fa-map-marker"></i> San Francisco, California, USA</div>
            <div class="pad-10 text-small"><i class="fa fa-briefcase"></i> Product Designer at <a href="javascript:void(0)"> Company, Inc. </a> </div>
            <ul class="list-inline">
              <li class="np"><a href="javascript:void(0)" class="btn btn-primary btn-circle"> <i class="fa fa-facebook"></i> </a></li>
              <li class="np"><a href="javascript:void(0)" class="btn btn-danger btn-circle"> <i class="fa fa-google-plus"></i> </a></li>
              <li class="np"><a href="javascript:void(0)" class="btn btn-primary btn-circle"> <i class="fa fa-linkedin"></i> </a></li>
              <li class="np"><a href="javascript:void(0)" class="btn btn-info btn-circle"> <i class="fa fa-twitter"></i> </a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="panel">
        <div class="panel-heading"> 
          <h3 class="panel-title"> User Information </h3> 
        </div>
          <div class="panel-body">
            <table class="table">
              <tbody>
                <tr>
                  <td><i class="fa fa-external-link ph-5"></i></td>
                  <td> URL </td>
                  <td> www.google.com</td>
                </tr>
                <tr>
                  <td><i class="fa fa-envelope-o ph-5"></i></td>
                  <td> Email </td>
                  <td>peter@google.com </td>
                </tr>
                <tr>
                  <td><i class="fa fa-phone ph-5"></i></td>
                  <td> Phone </td>
                  <td> (641)-734-4763 </td>
                </tr>
                <tr>
                  <td><i class="fa fa-skype ph-5"></i></td>
                  <td> Skype </td>
                  <td> peterclark82 </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="panel">
        <div class="panel-heading"> 
          <h3 class="panel-title"> Friends </h3> 
        </div>
          <div class="panel-body">
            <ul class="list-inline">
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user1.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user2.png" alt=""><i class="busy bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user3.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user4.png" alt=""><i class="away bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user5.png" alt=""><i class="off bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user6.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user7.png" alt=""><i class="busy bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user1.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user2.png" alt=""><i class="off bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user3.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user4.png" alt=""><i class="busy bottom text-white"></i></div>
              </li>
              <li class="pad-5">
                <div class="media-object avatar"><img src="images/photos/user5.png" alt=""><i class="on bottom text-white"></i></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="panel">
        <div class="panel-heading"> 
          <h3 class="panel-title"> General Information </h3> 
        </div>
          <div class="panel-body">
            <table class="table">
              <tbody>
                <tr>
                  <td>Position</td>
                  <td> UI Designer </td>
                </tr>
                <tr>
                  <td>Last Logged In</td>
                  <td>56 min</td>
                </tr>
                <tr>
                  <td>Status</td>
                  <td><span class="label label-sm label-info">Administrator</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-9 col-lg-8"> 
      <!-- Bootstrap Justified Tab -->
      <section class="panel panel-default">
        <tabset class="tab-block"> <tab heading="Timeline">
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-12"> 
                  
                  <!-- START TIMELINE -->
                  <div class="timeline timeline-right"> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-main">
                      <div class="timeline-date">2015</div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-globe"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading"> <img src="images/photos/user2.png"/> John Doe posted a new blog. </div>
                        <div class="timeline-body"> <img src="images/gallery/image1.png" class="img-text" width="150" align="left"/>
                          <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</h4>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p>
                        </div>
                        <div class="timeline-body comments">
                          <div class="comment-item"> <img src="images/photos/user5.png"/>
                            <p class="comment-head"> Brad Pitt <span class="text-muted">@johndoe</span> </p>
                            <p>Awesome, man, that is awesome...</p>
                            <small class="text-muted">10h ago</small> </div>
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                        <div class="timeline-footer"> <a href="javascript:void(0)">Read more</a>
                          <div class="pull-right"> <a href="javascript:void(0)"><span class="fa fa-comment"></span> 35</a> <a href="javascript:void(0)"><span class="fa fa-share"></span></a> </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-users"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading" style="padding-bottom: 10px;"> <img src="images/photos/user1.png"/> Shirley Anderson started following <img src="images/photos/user3.png"/> <img src="images/photos/user4.png"/> </div>
                        <div class="timeline-body comments">
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-image"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading"> <img src="images/photos/user3.png"/> Jonathan Anderson Uploaded 5 images </div>
                        <div class="timeline-body" id="links">
                          <div class="row">
                            <div class="col-md-4"> <a href="images/gallery/image1.png" title="Nature Image 1" data-gallery> <img src="images/gallery/image1.png" class="img-responsive img-text"/> </a> </div>
                            <div class="col-md-4"> <a href="images/gallery/image2.png" title="Nature Image 2" data-gallery> <img src="images/gallery/image2.png" class="img-responsive img-text"/> </a> </div>
                            <div class="col-md-4"> <a href="images/gallery/image3.png" title="Nature Image 3" data-gallery> <img src="images/gallery/image3.png" class="img-responsive img-text"/> </a> </div>
                          </div>
                        </div>
                        <div class="timeline-body comments">
                          <div class="comment-item"> <img src="images/photos/user4.png"/>
                            <p class="comment-head"> <a href="javascript:void(0)">John Doe</a> <span class="text-muted">@johndoe</span> </p>
                            <p>Amazing! Web App Mockup Dude</p>
                            <small class="text-muted">10h ago</small> </div>
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-star"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading" style="padding-bottom: 10px;"> <img src="images/photos/user3.png"/> Jonathan Smith completed the task “Application UI Re-design” within the dead line </div>
                        <div class="timeline-body comments">
                          <div class="comment-item"> <img src="images/photos/user6.png"/>
                            <p class="comment-head"> <a href="javascript:void(0)">Dmitry Ivaniuk</a> </p>
                            <p>Welldone Bro :) </p>
                            <small class="text-muted">5 min ago</small> </div>
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-star"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading" style="padding-bottom: 10px;"> <img src="images/photos/user5.png"/> <a href="javascript:void(0)">John Doe</a> joined group <a href="javascript:void(0)">Web Developers</a> </div>
                        <div class="timeline-body comments">
                          <div class="comment-item"> <img src="images/photos/user6.png"/>
                            <p class="comment-head"> <a href="javascript:void(0)">Dmitry Ivaniuk</a> <span class="text-muted">@Aqvatarius</span> </p>
                            <p>You r welcome my friend :)</p>
                            <small class="text-muted">5 min ago</small> </div>
                          <div class="comment-item"> <img src="images/photos/user7.png"/>
                            <p class="comment-head"> <a href="javascript:void(0)">John Doe</a> <span class="text-muted">@johndoe</span> </p>
                            <p>Thank you, Dmitry!!! ;)</p>
                            <small class="text-muted">1 min ago / to @Aqvatarius</small> </div>
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-map-marker"></span></div>
                      <div class="timeline-item-content">
                        <map class="ui-map-175" center="[40.74, -74.18]" scrollwheel="true">
                          <marker position="[40.72, -74.20]" title="marker" animation="Animation.DROP"></marker>
                          <marker position="[40.73, -74.19]" title="drag me" draggable="true"></marker>
                        </map>
                        <div class="timeline-heading"> <img src="images/photos/user3.png"/> <a href="javascript:void(0)">John Doe</a> invite you to <a href="javascript:void(0)">@Event</a> </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                    
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-item-right">
                      <div class="timeline-item-icon"><span class="fa fa-users"></span></div>
                      <div class="timeline-item-content">
                        <div class="timeline-heading" style="padding-bottom: 10px;"> <img src="images/photos/user1.png"/> <a href="javascript:void(0)"> Smith Johnson </a> added to friends <img src="images/photos/user2.png"/> <img src="images/photos/user3.png"/> <img src="images/photos/user4.png"/> </div>
                        <div class="timeline-body comments">
                          <div class="comment-write">
                            <textarea class="form-control" placeholder="Write a comment" rows="1"></textarea>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                                                            
                    <!-- START TIMELINE ITEM -->
                    <div class="timeline-item timeline-main">
                      <div class="timeline-date"><a href="javascript:void(0)"><span class="fa fa-ellipsis-h"></span></a></div>
                    </div>
                    <!-- END TIMELINE ITEM --> 
                  </div>
                  <!-- END TIMELINE --> 
                  
                </div>
              </div>
            </div>
          </div>
          </tab>
          <tab heading="Projects">
          <div class="panel panel-default">
            <div class="panel-body">
              <table class="table">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>Project</th>
                    <th> Project Deadline </th>
                    <th>Status</th>
                    <th>Client</th>
                    <th>Progress</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>1</td>
                    <td>IT Help Desk</td>
                    <td>11 Feb 2015</td>
                    <td><span class="label label-danger">Critical</span></td>
                    <td>Amery Lee</td>
                    <td><progressbar class="progressbar-xs no-margin" value="55"></progressbar></td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>Product Dev</td>
                    <td>12 june 2015</td>
                    <td><span class="label label-warning">High</span></td>
                    <td>Romayne Carlyn</td>
                    <td><progressbar class="progressbar-xs no-margin" value="34" type="success"></progressbar></td>
                  </tr>
                  <tr>
                    <td>3</td>
                    <td> Website Redesign</td>
                    <td>11 november 2015</td>
                    <td><span class="label label-success">Normal</span></td>
                    <td>Marybeth Joanna</td>
                    <td><progressbar class="progressbar-xs no-margin" value="68" type="info"></progressbar></td>
                  </tr>
                  <tr>
                    <td>4</td>
                    <td> Local Ad </td>
                    <td>15 april 2015</td>
                    <td><span class="label label-success">Normal</span></td>
                    <td>Jonah Benny</td>
                    <td><progressbar class="progressbar-xs no-margin" value="52" type="warning"></progressbar></td>
                  </tr>
                  <tr>
                    <td>5</td>
                    <td>Design new theme</td>
                    <td>2 May 2015</td>
                    <td><span class="label label-warning">High</span></td>
                    <td>Daly Royle</td>
                    <td><progressbar class="progressbar-xs no-margin" value="77" type="danger"></progressbar></td>
                  </tr>
                  <tr>
                    <td>6</td>
                    <td>Mockup Testing</td>
                    <td>6 June 2015</td>
                    <td><span class="label label-info">On Hold</span></td>
                    <td>Jane Swift</td>
                    <td><progressbar class="progressbar-xs no-margin" value="55" type="success"></progressbar></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          </tab> </tabset>
      </section>
      <!-- end Bootstrap Justified Tab --> 
    </div>
  </div>
</div>